<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/form.css">
  <link rel="stylesheet" href="/static/css/index.css">
  <link rel="stylesheet" href="/static/css/info.css">
</head>
<body>

  <div class="container header">
    个人中心
    <span>
      {{ if userInfo }}
      <div class="avatar">
        <img src="{{ userInfo.avatar }}">
        <p>{{ userInfo.nickname }}</p>
      </div>
      <ul class="options">
        <li><a href="/pages/info">个人中心</a></li>
        <li>注销登录</li>
      </ul>
      {{ else }}
      <a href="/pages/login">请登录</a>
      {{ /if }}
    </span>
  </div>

  <div class="nav container">
    <a href="/pages/index">&lt;&lt; 返回首页</a>
    <a href="/pages/cart">
      <img class="" src="/public/images/004.webp" alt="" style="width: 60px; height: 60px;">
    </a>
  </div>

  <div class="container box">
    <ul>
      <li class="active">个人信息</li>
      <li>修改密码</li>
    </ul>

    <form id="info" class="active">
      <span class="error"></span>
      <label style="height: 110px;">
        头像 : &nbsp;<div class="avatar" style="background-image: url('{{ userInfo.avatar }}')"></div>
        <input name="avatar" type="file">
      </label>
      <label>
        用户名 : &nbsp;<input class="username" name="username" type="text" value="{{ userInfo.username }}">
      </label>
      <label>
        昵称 : &nbsp;<input class="nickname" name="nickname" type="text" value="{{ userInfo.nickname }}">
      </label>
      <label>
        年龄 : &nbsp;<input class="age" name="age" type="text" value="{{ userInfo.age }}">
      </label>
      <label>
        性别 : &nbsp;<select class="gender" name="gender">
          <option value="男" {{ userInfo.gender === '男' ? checked : '' }}>男</option>
          <option value="女" {{ userInfo.gender === '女' ? checked : '' }}>女</option>
          <option value="保密" {{ userInfo.gender === '保密' ? checked : '' }}>保密</option>
        </select>
      </label>
      <label>
        个人介绍 : &nbsp;<textarea class="desc" name="desc" rows="2" cols="24">{{ userInfo.desc }}</textarea>
      </label>
      <button>修改</button>
    </form>

    <form id="pwd">
      <span class="error"></span>
      <label>
        旧密码 : &nbsp;<input class="oldPwd" name="oldPwd" type="text">
      </label>
      <label>
        新密码 : &nbsp;<input class="newPwd" name="newPwd" type="text">
      </label>
      <label>
        确认密码 : &nbsp;<input class="rPwd" name="rPwd" type="text">
      </label>
      <button>修改</button>
    </form>
  </div>
  
  <script src="/static/vander/jquery/jquery.min.js"></script>
  <script src="/static/js/info.js"></script>
</body>
</html>
